 <template>
   <Card :shadow="shadow">
      <div class="card-name">
        <div class="name width2">人工客服列表</div>
      </div>
      <div class="content-con">
        <div class="bank-search">
          <Form class="search-item" :model="form">
            <FormItem class="item-padding" prop="keyword">
              <i-input size="large" v-model="form.keyword" clearable placeholder="账户ID或账户名称"></i-input>
            </FormItem>
            <FormItem>
              <i-button size="large" class="btn-green" @click="search">搜索</i-button>
            </FormItem>
          </Form>
        </div>
        <!-- 商户ID与名称合并，改成keyword字段 -->
        <div class="bank-add">
          <i-button size="large" class="btn-green" @click="add">新增</i-button>
        </div>

        <div class="bank-form">
          <div class="form-item">
            <i-table :columns="foodColumns" :data="foodData">
              <template slot-scope="{ row }" slot="brokerage_model">
               {{row.brokerage_model  | brokerageModel}}
               <Tag color="cyan" v-if="row.brokerage_model==0">{{row.fixed_brokerage}} 元/笔</Tag>
               <Tag color="orange" v-if="row.brokerage_model==1">{{row.scale_brokerage}}%</Tag>
              </template>
            </i-table> <!-- table组件 -->
          </div>
          <div class="page">
            <Page :id="pageId"
             :total="dataCount"
             :page-size="pageSize"
             style="float: left;"
             @on-change="changepage"
             @on-page-size-change="nowPageSize"
             show-total show-sizer show-elevator></Page> <!-- page组件 -->
            <Button style="float: left;margin-left: 10px;" type="primary" @click="goElevatorPage">确认</Button>
          </div>
        </div>
        <Modal
          :uid ="uid"
          v-model="modal"
          width="300" title="请输入新密码"
          footer-hide>
          <i-form ref="formLogin" :model="formLogin" :rules="ruleLogin" class="safety-item">
            <Form-item prop="code">
              <i-input v-model="formLogin.code" type="password" password size="large" placeholder="请输入新密码"></i-input>
            </Form-item>
            <Form-item class="btn">
              <i-button @click="ok('formLogin')" class="save" size="large">确定</i-button>
              <i-button @click="cancel" size="large">取消</i-button>
            </Form-item>
          </i-form>
        </Modal>
      </div>
   </Card>

 </template>
<script>
import { modify } from '@/api/merchants'
import { list, del } from '@/api/artifi'
export default {
  // name: 'artificial_staff',
  props: {
    shadow: {
      type: Boolean,
      default: false
    }
  },
  data () {
    const validateCode = (rule, value, callback) => {
      var passwordreg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]+$/
      if (value === '') {
        callback(new Error('6-16位字母和数字组合,且至少2位数字'))
      } else if (!passwordreg.test(value)) {
        callback(new Error('密码必须由数字、字母组合,请输入6-16位'))
      } else {
        callback()
      }
    }
    return {
      uid: '',
      formLogin: {
        code: ''
      },
      form: {
        keyword: ''
      },
      ruleLogin: {
        code: [
          {
            validator: validateCode,
            trigger: 'blur'
          }
        ]
      },
      modal: false,
      pageId: 'targetpage',
      foodData: [],
      keyword: '',
      value: '',
      ajaxHistoryData: [],
      exportdata: [],
      // 初始化信息总条数
      dataCount: 0,
      pageSize: 10,
      pageCurrent: 1, // 当前页
      foodColumns: [
        {
          type: 'selection',
          width: 60,
          align: 'center',
          fixed: 'left'
        },
        {
          title: '账户ID',
          key: 'uid',
          width: 100
        },
        {
          title: '登录账号',
          key: 'account',
          width: 120
        },
        {
          title: '账户名称',
          key: 'nickname',
          width: 120
        },

        // {
        //   title: '账户余额',
        //   key: 'now_money',
        //   width: 100
        // },
        {
          title: '转账额度',
          key: 'paid_money',
          width: 140
        },
        {
          title: '并发数量',
          width: 200,
          key: 'concurrent'
        },

        {
          title: '状态',
          key: 'status',
          width: 160,
          render: (h, params) => {
            const statusName = params.row.status == '0' ? '启用' : '停止'
            if (statusName == '启用') {
              return h('span', {
                style: {
                  color: '#4daa5d'
                }
              }, statusName)
            } else if (statusName == '停止') {
              return h('span', {
                style: {
                  color: 'red'
                }
              }, statusName)
            }
          }
        },
        {
          title: '备注',
          key: 'mark',
          width: 200,
          tooltip: true
        },
        {
          title: '操作',
          key: 'action',
          width: 280,
          align: 'center',
          render: (h, params) => {
            return h('div', [

              h(
                'Button', {
                  props: {
                    size: 'small'
                  },
                  style: {
                    color: '#000',
                    height: '22px',
                    marginLeft: '15px',
                    padding: '0 5px',
                    fontSize: '12px'
                  },
                  on: {
                    click: () => {
                      this.uid = params.row.uid
                      this.modal = true
                    }
                  }
                },
                '重置密码'
              ),
			  h(
			    'Button', {
			      props: {
			        size: 'small'
			      },
			      style: {
                    color: '#000',
			        height: '22px',
			        padding: '0 5px',
			        marginLeft: '15px',
			        fontSize: '12px'
			      },
			      on: {
			        click: () => {
			          this.$router.push({
			            name: 'staff-change',
			            params: { row: params.row }
			          })
			          console.log(params.row)
			        }
			      }
			    },
			    '余额变更'
			  ),
              h(
                'Button', {
                  props: {
                    size: 'small'
                  },
                  style: {
                    color: 'white',
                    padding: '0 5px',
                    marginLeft: '15px',
                    height: '24px',
                    fontSize: '12px',
                    backgroundColor: '#009688'
                  },
                  on: {
                    click: () => {
                      this.$router.push({
                        name: 'staff-edit',
                        params: { row: params.row }
                      })
                      console.log(params.row)
                    }
                  }
                },
                '编辑'
              ),
              h(
                'Button',
                {
                  props: {
                    size: 'small'
                  },
                  style: {
                    color: 'white',
                    padding: '0 5px',
                    height: '24px',
                    marginLeft: '15px',
                    fontSize: '12px',
                    backgroundColor: '#ff5500'
                  },
                  on: {
                    click: () => {
                      this.remove(params.row.uid)
                    }
                  }
                },
                '删除'
              )
            ])
          }
        }
      ]
    }
  },

  methods: {
    getList () {
      const query = {
        keyword: this.form.keyword,
        pageSize: this.pageSize,
        pageCurrent: this.pageCurrent
      }
      list(query)
        .then(res => {
          this.foodData = res.data.data
          this.dataCount = res.data.count
        })
        .catch(err => {
          this.$Message.error(err.msg)
        })
    },
    // 在判断与select下拉框的值对应后，查询到的新的数据数组用push的方法，添加到newlist里面
    search () {
      this.getList()
    },
    // 表单验证
    ok () {
      this.$refs['formLogin'].validate((valid) => {
        if (valid) {
          let data = {
            uid: this.uid,
            password: this.formLogin.code
          }
          modify(data)
            .then(res => {
              this.$Message.success(res.msg)
            })
            .catch(err => {
              this.$Message.error(err.msg)
            })
          this.modal = false
        } else {
          this.$Message.error('表单验证失败!')
        }
      })
    },
    cancel () {
      this.$Message.info('Clicked cancel')
      this.modal = false
    },

    // 点击切换页面
    changepage (index) {
      // 储存当前页
      this.pageCurrent = index
      this.getList()
    },
    // 每页显示的数据条数
    nowPageSize (index) {
      // 实时获取当前需要显示的条数
      this.pageSize = index
      this.getList()
    },
    // 新增
    add () {
      this.$router.push({ name: 'staff-add' })
    },
    // 点击确认，跳转到输入的页码
    goElevatorPage () {
      var evtObj
      var thisPage = document.getElementById(this.pageId)
      // var thisPage=this.$refs.myPage;//也可以用ref来获取page这个dom
      var elevatorDiv = thisPage.getElementsByClassName('ivu-page-options-elevator')
      // 如果thisPage这里报错了,请核对上文的获取page的DOM的语句是否获取不到
      if (elevatorDiv && elevatorDiv.length > 0) {
        var pageInput = elevatorDiv[0].getElementsByTagName('input')[0]
        if (window.KeyEvent) { // firefox 浏览器下模拟事件
          evtObj = document.createEvent('KeyEvents')
          evtObj.initKeyEvent('keyup', true, true, window, true, false, false, false, 13, 0)
        } else { // chrome 浏览器下模拟事件
          evtObj = document.createEvent('UIEvents')
          evtObj.initUIEvent('keyup', true, true, window, 1)
          delete evtObj.keyCode
          if (typeof evtObj.keyCode === 'undefined') { // 为了模拟keycode
            Object.defineProperty(evtObj, 'keyCode', { value: 13 })
          } else {
            evtObj.key = String.fromCharCode(13)
          }
        }
        pageInput.dispatchEvent(evtObj)
      }
    },
    remove (id) {
      this.$Modal.confirm({
        title: '确认信息',
        content: '确认删除？',
        okText: '确认',
        cancelText: '取消',
        onOk: async () => {
          del(id)
			  .then(res => {
              this.$Message.success(res.msg)
              this.getList()
			  })
			  .catch(res => {
              this.$Message.error(res.msg)
			  })
		  }
      })
    }
  },

  created () {
    this.getList()
  }
}
</script>
 <style lang="less">
   //模态框垂直居中
   .ivu-modal-wrap {
      display: flex;
      align-items: center;
      justify-content: center;
     .ivu-modal{
        top: 0;
     }
   }
   .btn{
     margin-top: 40px;
     text-align: right;
   }
 </style>
